<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {useQaStore} from "stores/allQaMessage";
import {storeToRefs} from "pinia";
import {Notify} from "quasar";
import bus from "../../utils/eventBus"
import {conf} from "src/utils/serverHost.js";

let counterStore = useQaStore();
const {callIng} = storeToRefs(counterStore)
let upIng = ref(false)

let data = reactive({
    questionData: '',
    isLogin:true,
    isFocus: false,
    fromNetwork:true
})
// onMounted(()=>{
//   data.isLogin = istime();
// })
window['fromNetwork'] = data.fromNetwork
const istime = ()=>{
  let timeNow = new Date().getTime();
  let timeLine = window.sessionStorage.getItem('timeLine') - 19920802
  let timeDifference = Math.abs(timeNow - timeLine);
  return timeDifference <= 20 * 60 * 1000;
}
const sendQuestion = () => {
    if (!istime){
      return  location.reload();
    }
    bus.$emit("sendQuestion", JSON.parse(JSON.stringify(data.questionData)))
    data.questionData = '';
}
const callIat = () => {
    data.speechIng = true;
}
const callOcr = () => {
    document.getElementById("file").click();
}
const uploadFile = () => {
    var fileInput = document.querySelector('input[type="file"]');
    var file = fileInput.files[0]; // 获取文件
    var formData = new FormData();
    formData.append('file', file); // 将文件添加到formData对象中
    upIng.value = true
    bus.$emit('uploadFile', file.name);
    fetch(conf.httpHost + '/uploadfile', {
        method: 'POST',
        body: formData, // 使用FormData作为body
    }).then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text(); // 或者 response.json() 取决于服务器返回的数据类型
    }).then(data => {
        upIng.value = false
        document.querySelector('input[type="file"]').value = null;
    }).catch(error => {
        upIng.value = false
        document.querySelector('input[type="file"]').value = null;
    })
}
const callUpload = () => {
    // bus.$emit("uploadFile",file)
    document.getElementById("file").click();
}
const changeFrom = () => {
  window['fromNetwork'] = data.fromNetwork;
}
defineExpose({
    callIat
})
</script>

<template>
    <div class="question" v-show="data.isLogin">
        <!--        <div class="question-tool">-->
        <!--            <span>插件：</span>-->
        <!--            <q-icon name="format_size" color="primary" size="18px"/>-->
        <!--            <q-icon name="print" color="warning" size="18px"/>-->
        <!--            <q-icon name="today" color="teal" size="18px"/>-->
        <!--        </div>-->
        <input type="file" id="file" @change="uploadFile" v-show="false"/>
        <div class="question-input relative-position" :class="{'focus':data.isFocus}">
            <textarea @keyup.enter.stop="sendQuestion"
                      @blur="data.isFocus = false"
                      @focus="data.isFocus = true"
                      @keydown.ctrl.stop="" @keyup.ctrl.stop=""
                      class="input" v-model="data.questionData"></textarea>
          <q-toggle class="from-network" v-model="data.fromNetwork" @update:model-value="changeFrom" label="开启联网搜索" left-label/>
            <img @click.stop="callUpload" class="ocr" v-if="upIng" style="width: 100px;"
                 src="../../assets/images/loding.gif" alt="">
            <img @click.stop="callUpload" class="ocr" v-else style="width: 30px;"
                 src="../../assets/images/shangchuan.png" alt="">
            <!--            <img @click.stop="callIat" v-show="!speechIng" class="call" style="width: 30px;" src="../../assets/images/luyin.png" alt="">-->
            <!--            <scale-loader class="call" v-show="speechIng" size="30px" style="bottom: 15px" color="#ff9800" :loading="true"></scale-loader>-->
            <img @click="sendQuestion" v-show="!callIng" class="send" src="../../assets/images/fasong.png" alt="">
            <ring-loader size="30px" class="send" color="#ff9800" v-show="callIng" :loading="true"></ring-loader>
        </div>
        <!--        <div class="question-des">-->
        <!--            <span>测试生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观点。</span>-->
        <!--        </div>-->
    </div>
</template>

<style scoped lang="scss">
.question {
    width: 900px;
    margin: 0 auto;
    height: 150px;

    .focus {
        box-shadow: 0 0 10px 0 gray;
        background-color: white;
    }

    .question-input {
        width: 100%;
        height: 120px;
        border: 1px solid #1976D2;
        border-radius: 10px;
        position: relative;

        .input {
            width: 88%;
            height: 90%;
            position: relative;
            top: 5%;
            left: 20px;
            outline: none;
            resize: none;
            background-color: transparent;
            border: 0;
            color: #727794;
        }

        .call {
            width: 40px;
            height: 30px;
            cursor: pointer;
            position: absolute;
            right: 50px;
            bottom: 10px;
        }

        .ocr {
            width: 40px;
            height: 30px;
            cursor: pointer;
            position: absolute;
            right: 90px;
            bottom: 10px;
        }
        .from-network{
          position: absolute;
          left: 10px;
          bottom: 3px;
        }

        .send {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            cursor: pointer;
        }

        .ing {
            width: 50px;
            height: 30px;
            background-image: url("../../assets/images/loding.gif");
            background-size: 300%;
            background-position: center;
        }

        .send:hover {
            transition: all .3s;
            transform: scale(1.5);
        }
    }

    .question-des {
        font-size: 12px;
        text-align: center;
        padding: 5px 0;
    }
}
</style>
